<template>
  <!-- Vue3 新特性：允许多个根组件 -->
  <h1>大对象：{{ obj }}</h1>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>cp：{{ cp }}</h2>
  <button @click="obj.age++">点击大一岁</button>
</template>

<script>
  /*
    toRefs 函数
      作用：把响应式对象的每个属性都变成独立响应式对象
      价值：对一个**响应式对象**的所有内部属性, 都做响应式处理, 保证**展开或者解构出的数据也是响应式的**
      应用场景：
        const { name, age, cp } = toRefs(obj)
        或
        return { ...toRefs(obj) }
   */
  import { reactive, toRefs } from "vue";
  export default {
    name: "App",
    setup() {
      // 响应式对象
      const obj = reactive({
        name: "张三",
        age: 18,
        cp: {
          name: "李四",
          age: 20,
        },
      });

      // const name = obj.name;
      // const age = obj.age;

      // 💥 toRefs 把对象的每个属性都变成独立响应式对象
      // const { name, age, cp } = toRefs(obj);
      // console.log(toRefs(obj));

      // console.log(obj);
      // console.log(name);
      // console.log(age);
      // console.log(age._object === obj);   // true

      return {  ...toRefs(obj), obj };
    },
  };
</script>
